<template>
    <div>
        <el-menu router class="w-240px" default-active="1" text-color="#000" active-text-color="#000"
            background-color="#ffffff">
            <el-menu-item index="/">
                <div class="text-l">
                    <el-icon>
                        <House />
                    </el-icon>
                    <span>发现</span>
                </div>
            </el-menu-item>
            <el-menu-item index="/note">
                <div class="text-l">
                    <el-icon>
                        <CirclePlus />
                    </el-icon>
                    <span>发布</span>
                </div>
            </el-menu-item>
        </el-menu>
        <el-button @click="goto('/login')" color="#ff2e4d" class="w-240px !h-48px mt-2 bg" type="danger" round>登录</el-button>
    </div>
</template>

<script lang="ts" setup>
    import {
        CirclePlus,
        House
    } from '@element-plus/icons-vue'
    const goto = (key: any) => {
        const router = useRouter()
        router.push(key)
    }
</script>

<style lang="scss" scoped>
    :deep(.el-menu) {
        border: none !important;
    }
</style>